<template>
  <div>
    <el-dialog
      title="批量修改"
      :visible.sync="dialogVisible"
      width="500px"
      :close-on-click-modal="false"
      @close="close"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        size="small"
        label-width="100px"
        label-suffix="："
      >
        <el-form-item label="销售价" prop="price">
          <el-input v-model="form.price" maxlength="9"  @change="changePrice">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="市场价" prop="originPrice">
          <el-input v-model="form.originPrice"  maxlength="9"  @change="changePrice">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="上架状态" prop="status">
          <el-switch
            v-model="form.status"
            :active-value="1"
            :inactive-value="0"
            inactive-color="#ff4949"/>
            <span v-if="form.status">上架</span>
            <span v-else>下架</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" round @click="hide">取 消</el-button>
        <el-button size="small" round type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    var validatePrice = (rule, value, callback) => {
      let rpx = /^([1-9]\d{0,5}|0)(\.\d{1,2})?$|^1000000(\.0{1,2})?$/
        if (value === '') {
          callback();
        } else if (value == '0') {
          callback(new Error('请输入区间0.01-999999.99'));
        } else if (!rpx.test(value)) {
          callback(new Error('请输入区间0.01-999999.99'));
        } else {
          callback();
        }
      };
    return {
      //  校验字段
      rules: {
        price:[
          { validator: validatePrice, trigger: 'change' }
        ],
        originPrice:[
          { validator: validatePrice, trigger: 'change' }
        ],
      },
      // 配置
      resolve: null,
      reject: null,
      // 状态
      dialogVisible: null,
      // 数据
      form: {
        originPrice: '',
        price: '',
        status:1
      }
    }
  },
  methods: {
    /**
       * 弹框相关
       */
    open() {
      this.show()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    show() {
      this.dialogVisible = true
    },

    close() {},

    hide() {
      this.resolve = null
      this.reject = null
      this.dialogVisible = false
      this.form = {
        originPrice: '',
        price: '',
        status:1
      }
    },

    /**
       * 数据组
       */

    /**
       * 按钮组
       */
    // 确 定
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.resolve && this.resolve(this.form)
          this.hide()
        }
      })
    },
    /**
       * 状态组
       */

    /**
       * 方法组
       */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
